<template>
	<div class="admin-develop-data" :style="`height: ${documentHeight}px;`">
		<div class="task-search">
			<div class="task-search_martio">
				<div class="task-search_text">数据结构</div>
				<div class="task-search_box">
					<i class="el-icon-search"></i>
					<el-autocomplete v-model="state" placeholder="请输入搜索内容" popper-class="name" :fetch-suggestions="querySearchAsync" @select="handleSelect"></el-autocomplete>
				</div>
			</div>
		</div>
		<div class="develop-api_box">
			<dataLft ref="dataLft" @apiChang="apiChang" @change="dataChange"></dataLft>
			<dataRight ref="dataRight" @collect="collect"></dataRight>
		</div>
	</div>
</template>
<script>
	import dataLft from './widget/data-left.vue'
	import dataRight from './widget/data-right.vue'
	export default {
		components: {
			dataLft,
			dataRight
		},
		data() {
			return {
				selectInput: '',
				documentHeight: 0,
				viewModel: [],
				state: ''
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 74
			},
			apiChang(val) {
				this.$refs.dataRight.init(val)
			},
			querySearchAsync(queryString, cb) {
				let list = this.viewModel
				let resuls = queryString ? list.filter(this.createStateFilter(queryString)) : list
				cb(resuls)
			},
			createStateFilter(queryString) {
				return (state) => {
					return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
				}
			},
			dataChange(data) {
				this.viewModel = data
			},
			handleSelect(item) {
				// this.$refs.dataRight.init(item)
				this.$router.push('/Admin/Develop/Data?type=' + item.key)
			},
			collect() {
				this.$refs.dataLft.getCollect()
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>